<template>
  <div class="preOrder">
    <el-table :data="preChargeOrder" border style="width: 100%">
      <el-table-column label="产品名称" width="180" align="center">
        <template v-slot="{ row }">
          <img :src="row.imageUrl" alt="" class="productImg" />
          <span class="productName">{{ row.productName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" width="180" align="center">
      </el-table-column>
      <el-table-column prop="address" label="数量" align="center">
        <!-- 计数器 -->
        <template v-slot="{ row }">
          <el-input-number v-model="quantity" :min="1"> </el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="小计" width="180" align="center">{{
        total_fee
      }}</el-table-column>
    </el-table>
    <div class="preOrder_description">
      <span>实付款：{{ total_fee }}</span>
      <br />
      <br />
      <span>充值账户：{{ userInfo }}</span>
    </div>
    <button class="subOrder" @click="commitOrder">提交订单</button>
  </div>
</template>


<script>
  import * as api from "../../../api";
  import {
    mapState,
    mapMutations
  } from "vuex";
  export default {
    data() {
      return {
        quantity: 1,
        userInfo: "", //充值账户
      };
    },
    computed: {
      ...mapState(["preChargeOrder"]),
      total_fee() {
        //计算总价
        return this.quantity * this.preChargeOrder[0].price;
      },
    },
    mounted() {
      // console.log(this.preChargeOrder);
      let qf_userInfo = JSON.parse(localStorage.getItem("qf-userInfo"));
      this.userInfo = qf_userInfo.nickname;
    },
    methods: {
      ...mapMutations(["SET_ORDER_ID"]),
      commitOrder() {
        //提交订单
        this.$confirm('正在提交订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 2.获取订单号
          let product_id = this.preChargeOrder[0].product_id;
          let quantity = this.quantity;
          api.preVipOrder(product_id, quantity).then((res) => {
            // console.log(res);
            if (res.data.state) {
              //表示提交订单成功
              let order_id = res.data.order_id;
              // 将id存到vuex中
              this.SET_ORDER_ID(order_id); //调用存储id的方法
              this.$router.push({
                name: "pay"
              }); //跳转页面
               this.$message({
            type: 'success',
            message: '订单提交成功!',
          });
            } else { //订单提交失败
              this.$message.error('订单提交失败')
            }
          });
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
    },
  };
</script>

<style scoped lang='less'>
  .preOrder {
    padding-top: 20px;
  }

  .preOrder_description {
    margin-top: 20px;
    padding-top: 20px;
    float: right;
    width: 300px;
    height: 100px;
    border: 2px solid pink;
    position: relative;
    text-align: left;

    span {
      margin-left: 20px;
    }
  }

  .productImg {
    width: 100%;
  }

  .subOrder {
    width: 100px;
    height: 30px;
    background-color: red;
    color: #fff;
    border: none;
    position: absolute;
    right: 20px;
    top: 410px;
    cursor: pointer;
  }
</style>